<template>
    <div style="width: 100%; height: 100%; padding: 0 10px" class="map-css">
        <div id="container" style="width: 100%; height: 100%"></div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader';
import {getUnitMap, getEquipmentMap} from '@/utils/api';
window._AMapSecurityConfig = {
    securityJsCode: '25287497e8a6f7a6318f2c9ad03fe4ff', //填写你的安全密钥
};
export default {
    name: 'unitMap',
    data() {
        return {
            map: null, // 当前显示的地图区域对象
            AMap: null, // 拿到的所有的地图的对象
            colorMap: [
                'rgb(255, 0, 13)',
                'rgb(255, 126, 36)',
                'rgb(194, 187, 0)',
                'rgb(26, 255, 0)',
                'rgb(0, 84, 194)',
            ], // 颜色
            markers: [], // 标记
            // mapData: [], // 地图上的标记点
            // backList: [], // 后端给的所有的数据

            mapData: [
                {
                    name: '测试',
                    color: 'rgb(255, 0, 13)',
                    lng: 113.991682, // 经度
                    lat: 29.249937, // 纬度
                    online: [], //在线设备
                    Offline: [], //离线设备
                    // img:''
                },
            ], // 假数据，初始化是空数组
        };
    },
    async mounted() {},
    async activated() {
        let res = await getUnitMap({
            name: '',
            paged: 1,
            pageSize: 50000,
        }); //获取单位信息
        if (res && res.data && res.data.data) {
            this.mapData = res.data.data;
        } else {
            this.mapData = [];
        }
        let equipmentMap = await getEquipmentMap({
            scene_id: '',
            name: '',
            paged: 1,
            pageSize: 5000,
        }); //获取在线离线设备数量
        this.mapData.forEach(item => {
            item.Offline = [];
            item.online = [];
        });
        //     第二data[]数组个数统计设备个数。
        // 根据iot_node_status判断设备是在线还是离线（17是离线，16是在线）

        if (equipmentMap.data.data) {
            this.mapData.forEach(item => {
                equipmentMap.data.data.forEach(equipment => {
                    if (
                        item.id == equipment.scene_id &&
                        (equipment.iot_node_status == '17' || equipment.iot_node_status == '18')
                    ) {
                        item.Offline.push(equipment);
                    } else if (
                        item.id == equipment.scene_id &&
                        (equipment.iot_node_status == '16' || equipment.iot_node_status == '1')
                    ) {
                        item.online.push(equipment);
                    }
                });
            });
        }
        //DOM初始化完成进行地图初始化
        await this.initMap();
    },
    created() {
        window.handleBtn = val => {
            this.$router.push({path: '/monitoring', query: {val}});
        };
    },

    methods: {
        initMap() {
            let load = AMapLoader.load({
                key: '36ee10ec4ccd5cea768c040433499406', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: ['AMap.Marker', 'AMap.Scale'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            })
                .then(AMap => {
                    this.AMap = AMap;
                    this.map = new AMap.Map('container', {
                        //设置地图容器id
                        viewMode: '3D', //是否为3D地图模式
                        zoom: 5, //初始化地图级别
                        center: [105.602725, 37.076636], //初始化地图中心点位置
                        features: ['road', 'point'],
                    });
                    this.markPoints();
                })
                .catch(e => {
                    console.log(e);
                });
        },
        markPoints() {
            this.mapData.forEach(item => {
                // 创建一个 Marker 实例：
                const marker = new AMap.Marker({
                    position: new AMap.LngLat(item.lon, item.lat), // 经纬度对象，也可以是经纬度构成的一维数组[lng, lat]
                    // 使用 label 属性显示名称
                    label: {
                        content: item.name,
                        // offset: new window.AMap.Pixel(20, -20), // 调整标签位置
                        style: {
                            color: 'black',
                            backgroundColor: 'white',
                            border: 0,
                            padding: '2px',
                        },
                    },
                });
                // 将创建的点标记添加到已有的地图实例：
                this.map.add(marker);
                this.map.setFitView();
                //给标记点添加事件
                marker.on('click', e => {
                    this.setInfoWindows(e, item);
                });
            });
        },
        //显示的弹出框组件
        setInfoWindows(e, item) {
            // 信息窗体的内容
            let content = [
                `<div class='frame-css' style='padding: 0px;'>
        <div class='frame-title'><b>${item.name}</b></div>`,
                `<div class='frame-content'>
        <div>
            <div>在线设备 :<span class="frame-nav"> ${item.online.length || 0}</span></div>
            离线设备 :<span class="frame-nav"> ${item.Offline.length || 0}</span>
        </div>
        <div class='btn' onclick='handleBtn(${JSON.stringify(item)})'>监控中心</div>
    </div>`,
                `</div>`,
            ];

            // 创建 infoWindow 实例
            let infoWindow = new AMap.InfoWindow({
                content: content.join('<br>'), //传入 dom 对象，或者 html 字符串
            });
            // 打开信息窗体
            let dd = this.map.getCenter();
            // dd.pos = [e.pos[0], e.pos[1]]
            dd.lat = item.lat;
            dd.lng = item.lon;
            infoWindow.open(this.map, dd);
        },
    },
};
</script>

<style scoped>
.map-css >>> .amap-info-content {
    background-image: url('@/assets/img/dialog1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #ffffff;
    width: 260px;
    height: 160px;
}

.map-css >>> .frame-css {
    font-weight: 400;
    font-size: 14px;
    color: #ffffff;
    line-height: 29px;
    /* border: 1px solid red; */
    padding: 7px 0 0;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.map-css >>> .frame-title {
    margin-bottom: 8px;
}
.map-css >>> .frame-content {
    /* border: 1px solid red; */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.map-css >>> .frame-nav {
    font-weight: 400;
    line-height: 30px;
    color: #1bf455;
}
.map-css >>> .btn {
    height: 35px;
    width: 80px;
    background-image: url('@/assets/img/btn.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
</style>
